<template>
  <div class="message-list">
    <el-empty v-if="messageList.length === 0" description="暂无消息" />
    <div v-else class="message-container">
      <div class="h1">新消息通知</div>
      <div
        v-for="item in messageList"
        :key="item.id"
        class="message-item"
        :class="{ unread: item.msgStatus === '1' }"
        @click="handleReadMessage(item)">
        <div class="message-header">
          <span class="message-title">
            <!-- 接收人：{{ item.receiver }} -->
            接收消息
          </span>
          <span class="message-time">{{ item.createTime }}</span>
        </div>
        <div class="message-content">{{ item.content }}</div>
        <div class="message-footer">
          <el-tag v-if="item.msgStatus === '1'" size="small" type="warning">未读</el-tag>
          <el-tag v-else size="small" type="success">已读</el-tag>
        </div>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      style="margin-right: 20px"
      @pagination="fetchMessageList" />
  </div>
</template>

<script setup lang="ts">
import { getMessageList, markMessageRead, markAllRead } from '@/api/message'
import { ElMessage } from 'element-plus'

// 消息列表
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const messageList = ref([])
// 获取消息列表
const fetchMessageList = async () => {
  const response: any = await getMessageList(queryParams.value)
  messageList.value = response.rows || []
  total.value = response.total || 0
}

fetchMessageList()

// 标记消息为已读
const handleReadMessage = async item => {
  if (item.msgStatus === '2') return

  await markMessageRead({ id: item.id })
  item.msgStatus = '2'
  ElMessage.success('消息已标记为已读')
  fetchMessageList()
}
</script>

<style scoped lang="scss">
.h1 {
  font-size: 18px;
  font-weight: bold;
}
.message-list {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  padding-right: 0;

  .message-container {
    height: calc(100% - 60px);
    padding-right: 20px;
    overflow-y: auto;
    .message-item {
      padding: 15px;
      border-bottom: 1px solid #e8e8e8;
      cursor: pointer;
      transition: all 0.3s;
      background-color: #fff;

      &:hover {
        background-color: #f5f7fa;
      }

      &.unread {
        background-color: #ecf5ff;

        &:hover {
          background-color: #d9ecff;
        }
      }

      &:last-child {
        border-bottom: none;
      }

      .message-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;

        .message-title {
          font-weight: bold;
          font-size: 14px;
          color: #303133;
        }

        .message-time {
          font-size: 12px;
          color: #909399;
        }
      }

      .message-content {
        font-size: 13px;
        color: #606266;
        line-height: 1.5;
        margin-bottom: 8px;
        word-break: break-all;
      }

      .message-footer {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
